---
title: Crosshair Highlighting
icon: Cross
---

<MetaData
  lang="en-US"
  meta={{
    plugins: [{
      client: '@univerjs/sheets-crosshair-highlight',
      facade: '@univerjs/sheets-crosshair-highlight/facade',
      locale: '@univerjs/sheets-crosshair-highlight/locale/en-US',
      style: '@univerjs/sheets-crosshair-highlight/lib/index.css',
    }],
    server: 'No',
  }}
/>

Crosshair highlighting highlights the row and column of the currently selected cell, making it easier for users to identify the active cell.

<PlaygroundFrame lang="en-US" slug="sheets/crosshair-highlighting" clickToShow />

## Preset Mode

The crosshair highlighting feature does not provide a preset mode but supports mixing with its plugin.

```package-install
npm install @univerjs/watermark
```

### Usage

```typescript
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight' // [!code ++]

import '@univerjs/sheets-crosshair-highlight/facade' // [!code ++]

import '@univerjs/sheets-crosshair-highlight/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      SheetsCrosshairHighlightEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsCrosshairHighlightPlugin, // [!code ++]
  ],
})
```

## Plugin Mode

### Installation

```package-install
npm install @univerjs/sheets-crosshair-highlight
```

### Usage

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight'
import SheetsCrosshairHighlightEnUS from '@univerjs/sheets-crosshair-highlight/locale/en-US'

import '@univerjs/sheets-crosshair-highlight/lib/index.css'

import '@univerjs/sheets-crosshair-highlight/facade'

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      SheetsCrosshairHighlightEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsCrosshairHighlightPlugin) // [!code ++]
```

## Facade API

Complete Facade API type definitions can be found in the [FacadeAPI](https://reference.univer.ai/en-US).

### Toggle Crosshair Highlight

```typescript
univerAPI.setCrosshairHighlightEnabled(true)

univerAPI.setCrosshairHighlightEnabled(false)
```

### Get Crosshair Highlight Enabled Status

```typescript
univerAPI.getCrosshairHighlightEnabled()
```

### Set Crosshair Highlight Color

```typescript
univerAPI.setCrosshairHighlightColor('red')
```

### Get Crosshair Highlight Color

```typescript
univerAPI.getCrosshairHighlightColor()
```

### Event Listeners

Complete event type definitions can be found in the [Events](https://reference.univer.ai/en-US/classes/FEventName).

`CrosshairHighlightEnabledChanged` event will be triggered when the crosshair highlight enabled status changes.

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightEnabledChanged, (params) => {
  const { enabled, workbook, worksheet } = params
})

// Remove the event listener using `disposable.dispose()`
```

`CrosshairHighlightColorChanged` event will be triggered when the crosshair highlight color changes.

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightColorChanged, (params) => {
  const { color, workbook, worksheet } = params
})

// Remove the event listener using `disposable.dispose()`
```
